@import "../../../_common/style/animations/fromDirectionBottom";
@import "../../../_common/style/mixins/var";
@mixin vmui-action-sheet {
  .vmui-dialog-white-mask {
    flex-direction: column;
    justify-content: flex-end;

    @keyframes opacityOut {
      to {
        opacity: 0;
      }
    }

    .vmui-dialog-action-sheet-white-mask {
      position: fixed;
      left: 0; top: 0; right: 0; bottom: 0;
      background: rgba(150, 150, 150, 0.3);
    }
    &.leave {
      .vmui-dialog-action-sheet-white-mask {
        animation: opacityOut .2s linear forwards;
      }
      .vmui-action-sheet {
        animation: leaveDirectionBottom .2s linear forwards;
      }
    }

    .vmui-action-sheet {
      width: 100%;
      background: #EFEFF4;
      text-align: center;
      animation: fromDirectionBottomIn .2s ease forwards;

      .vmui-action-sheet-item {
        font-size: pxRem(14);
        line-height: pxRem(50);
        background: #fff;
        color: #555;

        border-bottom: pxRem(1) solid #D9D9D9;

        &.cancel {
          &:before {
            content: '';
            display: block;
            height: pxRem(4);
            background: #f2f2f2;
          }
        }
      }
    }
  }
}
